<!--
 * @Author: zhengshuang
 * @Date: 2021-02-22 21:00:44
 * @LastEditTime: 2021-02-23 09:06:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_tree_transfer\src\components\TreeTransfer.vue
-->
<template>
  <div class="tree_transfer">
    <!-- 左侧 -->
    <div class="tree_transfer_body tree_transfer_left">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :filter-node-method="filterNode"
        ref="treeLeft"
      >
      </el-tree>
    </div>

    <div class="tree_option_btn">
      <el-button class="el_button" @click="option(true)">向左</el-button>
      <el-button class="el_button" @click="option(false)">向右</el-button>
    </div>

    <div class="tree_transfer_body tree_transfer_right">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :filter-node-method="reFilterNode"
        ref="treeRight"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /* 字段配置 同element */
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label",
        };
      },
    },
    data: {
      type: Array,
      default: () => [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
    },
  },
  data() {
    return {
      checkList: [],
    };
  },
  methods: {
    option(type) {
      /* type == true 向左 type == false 向右 */
      const refsElement = type ? this.$refs.treeLeft : this.$refs.treeRight;
      const checkedNodes = refsElement.getCheckedNodes(false, true);
      checkedNodes.forEach((item) => {
        item.TreeChecked = type;
      });
      this.viewPosition(type);
      this.returnRightList(checkedNodes, type);
    },
    /* 抛出右侧元素 */
    returnRightList(checkedNodes) {
      /* 查重,得到当前数组,添加或删除进行抛出 */
      checkedNodes.forEach((item) => {
        const index = this.checkList.findIndex((find) => find.id === item.id);
        if (index < 0) {
          this.checkList.push(item);
        } else {
          this.checkList.splice(index, 1);
        }
      });
      this.$emit("getOptionNode", this.checkList);
    },
    /* 利用过滤元素使得两边隐藏元素 */
    /* 左侧 */
    filterNode(value, data) {
      // console.log(value);
      return !data.TreeChecked;
    },
    /* 右侧 */
    reFilterNode(value, data) {
      // console.log(value);
      return data.TreeChecked;
    },
    /* 视图元素位置更新 */
    viewPosition(isClear) {
      /* 启用过滤节点,让该隐藏的元素隐藏 */
      this.$refs.treeLeft.filter();
      this.$refs.treeRight.filter();
      if (isClear !== undefined) {
        /* 清空选中节点 */
        const refsElement = isClear
          ? this.$refs.treeLeft
          : this.$refs.treeRight;
        refsElement.setCheckedKeys([]);
      }
    },
  },
  mounted() {
    this.viewPosition();
  },
};
</script>

<style lang="scss" scoped>
/* 本组件样式 */
.tree_transfer {
  width: 100%;
  height: 100%;
  padding: 10px;
  .tree_transfer_body {
    width: 40%;
    height: 100%;
    float: left;
    background: #fff;
    border: 1px solid rgb(197, 197, 197);
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 8px;
  }
  .tree_option_btn {
    width: 18%;
    height: 100%;
    float: left;
    text-align: center;
    .el_button {
      margin-top: 70px;
      margin-left: 0;
    }
  }
}
</style>

<style lang="scss">
/* 样式穿透 */
.tree_transfer {
}
</style>